<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>正方体</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			html {
				height: 100%;
				background-color: #000;
			}
			
			ul {
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -150px;
				margin-top: -150px;
				width: 300px;
				height: 300px;
				transform-style: preserve-3d;
				/*perspective: 500px;*/
				transform: rotateX(-20deg) rotateY(-20deg);
				transition: 2s;
			}
			ul:hover{
				transform: rotateX(180deg) rotateY(180deg);
			}
			li {
				position: absolute;
				width: 100%;
				height: 100%;
				background-color: rgba(100, 255, 0,0.6);
				font-size: 5em;
				color: red;
				line-height: 300px;
				text-align: center;
				border: 1px solid red;
				box-sizing: border-box;
			}
			li:nth-of-type(1) {
				transform: translateZ(150px)
			}
			
			li:nth-of-type(2) {
				transform: rotateX(90deg) translateZ(150px)
			}
			
			li:nth-of-type(3) {
				transform: rotateX(90deg) translateZ(-150px)
			}
			
			li:nth-of-type(4) {
				transform: rotateY(90deg) translateZ(150px)
			}
			
			li:nth-of-type(5) {
				transform: rotateY(90deg) translateZ(-150px)
			}
			li:nth-of-type(6) {
				transform: translateZ(-150px)
			}
		</style>
	</head>

	<body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ul>
	</body>

</html>